<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>表单重置案例</title>
</head>

<body>
  <form>
    <input type="text" />
    <input type="text" name="a2" />
    <input type="text" name="a3" />
    <button class="submit_btn">提交</button>
    <button class="submit_reset">重置</button>
    <button type="reset">重置2</button>
  </form>
  <script>
    /* 
    form 
    1 里面自带 提交和重置功能 

    2 重置
      1 form.reset();
      2 给按钮设置type类型 = reset 
    
     */
    const form = document.querySelector('form');
    const submit_reset = document.querySelector('.submit_reset');

    form.addEventListener('submit', function (event) {
      // 阻止刷新
      event.preventDefault();
    });
    submit_reset.addEventListener('click', function () {
      console.log('重置');
      form.reset();
    });
  </script>
</body>

</html>